<template>
    <div class="search-box">
        <MulSearch />
        <div class="main-box">
            <div class="left-box">
                <div class="tit">出版年</div>
                <div class="filter-box">
                    <ul>
                        <li v-for="(y,i) in year" :key="i" :class="filterList1.indexOf(i)>-1?'cur':''" v-show="showAll1||i<5" @click="filterChange('出版年',y,i)">{{y}}<span>( {{i+1}} )</span></li>
                    </ul>
                    <div class="show-all">
                        <a href="javascript:" @click="showAll('showAll1')"><a-icon :type="showAll1?'caret-up':'caret-down'"></a-icon>{{showAll1?'收起':'全部显示'}}</a>
                    </div>
                </div>
                <div class="tit">出版地</div>
                <div class="filter-box">
                    <ul>
                        <li v-for="(y,i) in area" :key="i" :class="filterList2.indexOf(i)>-1?'cur':''" v-show="showAll2||i<5" @click="filterChange('出版地',y,i)">{{y}}<span>( {{i+1}} )</span></li>
                    </ul>
                    <div class="show-all">
                        <a href="javascript:" @click="showAll('showAll2')"><a-icon :type="showAll2?'caret-up':'caret-down'"></a-icon>{{showAll2?'收起':'全部显示'}}</a>
                    </div>
                </div>
                <div class="tit">出版社</div>
                <div class="filter-box">
                    <ul>
                        <li v-for="(y,i) in library" :key="i" :class="filterList3.indexOf(i)>-1?'cur':''" v-show="showAll3||i<5" @click="filterChange('出版社',y,i)">{{y}}<span>( {{i+1}} )</span></li>
                    </ul>
                    <div class="show-all">
                        <a href="javascript:" @click="showAll('showAll3')"><a-icon :type="showAll3?'caret-up':'caret-down'"></a-icon>{{showAll3?'收起':'全部显示'}}</a>
                    </div>
                </div>
            </div>
            <div class="right-content">
                <resultList ref="result" @removeFilter="removeFilter" />
            </div>
        </div>
        <div class="main-box">
            <a-pagination show-quick-jumper :default-current="2" :total="500" @change="onChange" />
        </div>
    </div>
</template>

<script>
    import MulSearch from '../../components/layout/mulSearch'
    import resultList from '../../components/resultList'
    export default {
        components:{
            MulSearch,
            resultList
        },
        data(){
            return{
                showAll1:false,
                showAll2:false,
                showAll3:false,
                filterList1:[],
                filterList2:[],
                filterList3:[],
                year:[1900,1901,1902,2020,2020,2020,1901,1902,2020,2020,2020,1901,1902,2020,2020,2020],
                area:['上海','北京','深圳','上海','北京','深圳','上海','北京','深圳','上海','北京','深圳','上海','北京','深圳'],
                library:['上海图书馆','北京图书馆','上海图书馆','北京图书馆','上海图书馆','北京图书馆','上海图书馆','北京图书馆','上海图书馆','北京图书馆','上海图书馆','北京图书馆','上海图书馆','北京图书馆','上海图书馆','北京图书馆']
            }
        },
        methods:{
            onChange(){

            },
            showAll(key){
                this[key]=!this[key]
            },
            removeFilter(i,type){
                console.log(i,type)
                let key
                if(type==='出版年'){
                    key='filterList1'
                }
                else if(type==='出版地'){
                    key='filterList2'
                }
                else{
                    key='filterList3'
                }
                this[key].splice(i,1)
            },
            filterChange(type,val,i){
                let key
                if(type==='出版年'){
                    key='filterList1'
                }
                else if(type==='出版地'){
                    key='filterList2'
                }
                else{
                    key='filterList3'
                }
                if(this[key].indexOf(i)>-1){
                    return
                }else{
                    this[key].push(i)
                    this.$refs.result.addFilter(type,val)
                }
            }
        }
    }
</script>

